<template>
	<view>
	        <u-navbar
	            @rightClick="rightClick"
	            :autoBack="true"
	            rightText='搜索'
	        >
	            <view slot='center' class='search'>
	                <u-search 
	                    placeholder="请搜索您想要的课程" 
	                    v-model="keyword"
	                    :focus='true'
	                    :showAction='false'
	                    :clearabled='false'
	                    height='0'
						@search='rightClick'
	                ></u-search>
	            </view>
	        </u-navbar>
	        <view class='line'></view>
	        <view class='search-history'  v-if='historyList.length > 0'>
	            <view class='history-title'>
	                <view class='history-text'>历史搜索</view>
					<view @click='removeHistory'>
						<u-icon name="trash"></u-icon>
					</view>

	            </view>
	            <view class='history-list'>
	                <view
					v-for='(item,index) in historyList'
					:key='index'
					@click="rightClick(item)"
					>{{item}}</view>
	            </view>
	        </view>
	        <view class='search-hot'>
	            <view class='hot-title'>
	                <u-icon name="search" size='22'></u-icon>
	                <view class='history-text'>热门搜索</view>
	            </view>
	            <view class='hot-list'>
	                <view
						v-for='(item,index) in hotList'
						:key='item.id'
						@click="rightClick(item.keywords)"
						style='display: flex;'
					>{{item.keywords}}
					<u-icon name="photo" v-if='index==0 || index==1'></u-icon>
					</view>
	            </view>
	        </view>
	    </view>
</template>

<script>	
import { getHotKeywords } from '@/api/search.js'
	export default{
	    data () {
	        return {
	            keyword:'',
				historyList:JSON.parse(uni.getStorageSync('historySearch')),
				hotList:[]
	        }
	    },
		onLoad() {
			getHotKeywords().then(res=>{
            this.hotList = res.list;
			})
		},
	    methods:{
	        //搜索按钮
	        rightClick(key){
				let k=this.keyword ||key
				
	           if( !k ) return;
             
            let index = this.historyList.indexOf( k );
             
            if( index < 0 ){
                this.historyList.unshift(k);
                uni.setStorageSync('historySearch',JSON.stringify(this.historyList));
            }else{
                this.historyList.unshift(  this.historyList.splice(index,1)[0]    )
                uni.setStorageSync('historySearch',JSON.stringify(this.historyList));
            }
			// 跳转到搜索列表
			uni.navigateTo({
				url:`/pages/search/search-list?key=${k}`
			})
	        },
			 //删除历史搜索
        removeHistory(){
            let That = this;
            uni.showModal({
                title:'您确定要删除历史记录吗？',
                success:function( e ){
                    if( e.confirm ){
                        That.historyList = [];
                        uni.setStorageSync('historySearch',JSON.stringify([]));
                    }
                }
            })
        }
	    }
	}
</script>

<style>
	.search{
	    width: 527rpx;
	}
	/deep/ .u-search__content{
	    padding:6rpx 20rpx;
	}
	.line{
	    width: 100%;
	    height: 10rpx;
	    background: rgba(241,241,241,0.39);
	    border: 1rpx solid #DCDCDC;
	    margin-top:110rpx;
	}
	.search-history{
	    padding: 33rpx;
	}
	.history-title{
	    display: flex;
	    justify-content: space-between;
	}
	.history-text{
	    font-size: 28rpx;
	    font-weight: bold;
	    color: #636363;
	}
	.history-list{
	    display: flex;
	    flex-wrap: wrap;
	    padding-top:33rpx;
	}
	.history-list > view{
	    padding: 5px 10px;
	    margin:10rpx 0px;
	    font-size:24rpx;
	    background-color: #e6e6e6;
	    border-radius: 5px;
	}
	.history-list > view:nth-child(2n){
	    margin-left:30rpx;
	    margin-right:30rpx;
	}
	.search-hot{
	    padding:33rpx;
	}
	.hot-title{
	    display: flex;
	    padding-bottom:33rpx;
	    border-bottom:1px solid #ccc;
	}
	.hot-list{
	    display: flex;
	    flex-wrap: wrap;
	}
	.hot-list > view{
	    width: 50%;
	    padding-top:33rpx;
	    font-size: 29rpx;
	    font-weight: 400;
	    color: #333333;
	}
</style>